<template>
  <div id="change-mobile-page"  :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(43+this.getSafeArea().top)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top+10)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberSetUp')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>修改手机号码</span>
    </div>
    <el-form class="form-box" :model="currFormData" ref="currForm" label-width="80px" :rules="formRule">
      <el-form-item
        v-if="step===0"
        label="旧号码:"
        prop="oldMobile">
        <el-input style="width: 60%" type="number" v-model="currFormData.oldMobile"></el-input>
      </el-form-item>

      <el-form-item
        v-if="step===0"
        label="验证码:"
        prop="oldMobileSms">
        <el-col :span="12">
          <el-input
            style="width: 100%"
            placeholder="请输入验证码"
            v-model="currFormData.oldMobileSms"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <send-sms :get-mobile="getOldMoblie" event-type="changeMobileOld"/>
        </el-col>
      </el-form-item>

      <el-form-item
        v-if="step===1"
        label="新号码:"
        prop="newMobile">
        <el-input style="width: 60%" type="newMobile" v-model="currFormData.newMobile"></el-input>
      </el-form-item>

      <el-form-item
        v-if="step===1"
        label="验证码:"
        prop="newMobileSms">
        <el-col :span="12">
          <el-input
            style="width: 100%"
            placeholder="请输入验证码"
            v-model="currFormData.newMobileSms"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <send-sms :get-mobile="getNewMoblie" event-type="changeMobileNew"/>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button  style="width: 60%;" type="primary" size="small" @click="nextStep()" v-if="step===0">下一步</el-button>
        <el-button  style="width: 60%;" type="danger" size="small" @click="submitForm()"  v-if="step===1">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import SendSms from '../common/SendSms'

export default {
  name: 'MemberChangeMobile',
  components: {SendSms},
  data:function () {
    return {
      step:0,
      // 第一步请求成功,服务器返回一个【步骤-验证码code】
      oldVerifyCode:'',
      currFormData:{
        oldMobile:'',
        oldMobileSms:'',
        newMobile:'',
        newMobileSms:'',
      },
      formRule:{
        oldMobile: [
          {required: false, message: '请输入 旧手机号'},
          {validator: Vue.prototype.checkMobile, trigger: ['blur', 'change']}
        ],
        oldMobileSms: [
          {required: false, message: '请输入 旧手机验证码'},
          {validator: Vue.prototype.checkVerifyCode, trigger: ['blur', 'change']}
        ],
        newMobile: [
          {required: false, message: '请输入 新手机号'},
          {validator: Vue.prototype.checkMobile, trigger: ['blur', 'change']}
        ],
        newMobileSms: [
          {required: false, message: '请输入 新手机验证码'},
          {validator: Vue.prototype.checkVerifyCode, trigger: ['blur', 'change']}
        ],
      }
    }
  },
  methods:{
    getOldMoblie:function () {
      return this.currFormData.oldMobile
    },
    getNewMoblie:function () {
      return this.currFormData.newMobile
    },
    submitForm:function () {
      if (this.currFormData.newMobile.length!==11){
        return this.successTip('新手机号 必须','error')
      }
      if (this.currFormData.newMobileSms.length>6 || this.currFormData.newMobileSms.length<4){
        return this.successTip('新手机号-验证码 错误','error')
      }
      var form={
        oldMobile:this.currFormData.oldMobile,
        oldMobileSmsCode:this.currFormData.oldMobileSms,
        currMobile:this.currFormData.newMobile,
        currMobileSmsCode:this.currFormData.newMobileSms
      }
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Member/changeMobile', form, function (data) {
        $this.successTip('修改成功,请重新登录!')
        $this.CurrUser.setCache(null)
        $this.$router.push("/Login")
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
      // this.step=0
      console.log(form)
    },
    nextStep:function () {
      if (this.currFormData.oldMobile.length!==11){
        return this.successTip('旧手机号 必须','error')
      }
      if (this.currFormData.oldMobileSms.length>6 || this.currFormData.oldMobileSms.length<4){
        return this.successTip('旧手机号-验证码 错误','error')
      }
      this.step=1
    }
  }
}
</script>

<style scoped>

</style>
